<template>
	<view class="add-box">
		<view class="top1">
			<van-cell-group>
			  <van-field
				:value="username"
			    clearable
			    label="收货人"
			    placeholder="填写姓名"
				custom-style="border-bottom: 2rpx solid #ddd"
				:error="isError"
				@blur="userBlur"
				@focus="userFocus"
			  />
			
			  <van-field
				:value="phone"
				clearable
			    label="联系电话"
			    placeholder="填写手机号码"
				:error-message="fotmatPhone"
				@blur="phoneBlur"
				@focus="phoneFocus"
				custom-style="border-bottom: 2rpx solid #ddd"
			  />
			</van-cell-group>
			<view class="area clearfix">
				<view class="left">所在区域</view>
				<view class="right" @click="toggleArea">
					<text class="left">{{address}}</text>
					<image src="/static/category/right.png" mode="aspectFill" class="img1 left"></image>
				</view>
			</view>
			<!-- 具体地址 -->
			<view class="juti">
				<textarea placeholder-style="color:#dddddd" 
						  placeholder="请输入具体位置" 
						  @input="areaInput"
						  :value="juTi"/>
			</view>
		</view>
		<view class="btnV">
			<view class="btnVV">
				<button type="default" class="btn" @click="savebtn">保存</button>
			</view>
			<view class="areaV" v-if="areaShow">
				<van-area :area-list="areaList" @cancel="cancel" @confirm="confirm" />
			</view>
		</view>
		<view class="yy">
			<van-toast id="van-toast" />
		</view>
	</view>
</template>

<script>
	import area from '../../utils/area.js'
	import Toast from '../../wxcomponents/vant/toast/toast'
	export default {
		data() {
			return {
				username: '',
				phone: '',
				areaList: {},
				areaShow: false,
				address: '请选择',
				fotmatPhone: '',
				isError: false,
				juTi: '',
				isToastShow: false,
				id: ''
			};
		},
		methods: {
			toggleArea() {
				this.areaShow = true
			},
			cancel() {
				this.areaShow = false
			},
			confirm(e) {
				let str = ''
				let arr = e.detail.values
				for(let i = 0; i < arr.length; i++) {
					str += arr[i].name
				}
				this.address = str
				this.areaShow = false
			},
			// 一 失去焦点
			userBlur(e) {
				let res = e.detail.value
				if(res === '') {
					this.isError = true
				}
				this.username = res;
			},
			userFocus(e) {
				this.isError = false
			},
			// 二 失去焦点
			phoneBlur(e) {
				let chenkPhone=/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
				let ph = e.detail.value
				if(!ph.match(chenkPhone)) {
					this.fotmatPhone = '请输入正确格式的手机号码'
				} else {
					this.phone = ph
				}
			},
			phoneFocus() {
				this.fotmatPhone = ''
			},
			areaInput(e) {
				this.juTi = e.detail.value
			},
			savebtn() {
				if(this.username == '' || this.phone == '' || this.address == '' || this.juTi == '') {
					const toast = Toast.fail({
					  duration: 0, // 持续展示 toast
					  forbidClick: true,
					  message: '内容不完善',
					  selector: '#van-toast',
					});
					this.isToastShow = true
					let second = 3;
					const timer = setInterval(() => {
					  second--;
					  if (second) {
					    toast.setData({
					      message: `内容不完善`,
					    });
					  } else {
					    clearInterval(timer);
					    Toast.clear();
					  }
					}, 1000);
				}
				else {
					let obj = {
						name: this.username,
						phone: this.phone,
						address: this.address,
						juTi: this.juTi
					}
					uni.showLoading({
						title: '处理中...'
					})
					uniCloud.callFunction({
						name: "address",
						data: {
							type: 'editId',
							id: this.id,
							dataObj: obj
						}
					}).then(res => {
						let flag = res.success
						if(flag) {
							uni.hideLoading()
							uni.redirectTo({
								url: '/pages/address/address'
							})
						}
					}).catch(err => {
						uni.hideLoading()
						console.log(err);
					})
				}
			}
		},
		created() {
			this.areaList = area
		},
		onLoad(option) {
			this.id = option.id
			let id = option.id
			uni.showLoading({
				title: '处理中...'
			})
			uniCloud.callFunction({
				name: "address",
				data: {
					type: 'getId',
					id: id
				}
			}).then(res => {
				uni.hideLoading()
				let res1 = res.result.data[0];
				this.username = res1.name
				this.phone = res1.phone
				this.address = res1.address
				this.juTi = res1.juTi
			})
		}
	}
</script>

<style lang="scss" scoped>
	.add-box {
		position: relative;
	}
	.top1 {
		background-color: white;
		height: 400rpx;
	}
	.area {
		width: $uni-width;
		height: 87rpx;
		border-bottom: 2rpx solid #ddd;
		padding: 28rpx;
		box-sizing: border-box;
		font-size: 27rpx;
		color: #696a6b;
	}
	.img1 {
		display: inline-block;
		width: 30rpx;
		height: 30rpx;
		vertical-align: bottom;
		margin-left: 10rpx;
		margin-top: 4rpx;
	}
	.juti {
			width: $uni-width;
			height: 136rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
		}
	.btnV {
		position: relative;
		background-color: #f5f5f9;
		width: $uni-width;
		height: 813rpx;
		.btnVV {
			width: $uni-width;
			height: 120rpx;
			padding: 20rpx;
			box-sizing: border-box;
			.btn {
				position: relative;
				width:  690rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: $uni-color-lightblue;
				font-size: 32rpx;
				font-weight: 600;
				letter-spacing: 2rpx;
				color: white;
				z-index: 30;
			}
		}
		.areaV {
			width: $uni-width;
			position: absolute;
			bottom: 0;
		}
	}
	.yy {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 100;
	}
</style>
